﻿@{
    ViewBag.Title = "";

}
@model Guid
@section styles{
    <link href="~/static/css/Ztree.css" type="text/css" rel="stylesheet" />
    <link href="~/static/css/metroStyle.css" type="text/css" rel="stylesheet" />
    <link href="~/static/css/public.css" type="text/css" rel="stylesheet" />
    <link href="~/static/css/client.css" type="text/css" rel="stylesheet" />
    <link href="~/Content/bootstrap-tagsinput.css" rel="stylesheet" />
}
<style>
    a {
        text-decoration: none;
    }

    .bootstrap-tagsinput .tag {
        background-color: #009688;
        border-radius: 3px;
        padding: 5px;
        line-height: 3;
    }

    .bootstrap-tagsinput {
        border: 0;
    }
</style>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">@ViewBag.Title</div>
                <div class="layui-card-body">
                    <blockquote class="layui-elem-quote">注：选择会员复选框后需要点击">"按钮将会员加入发送列表</blockquote>
                </div>
                <div class="layui-card-body layui-col-md6">
                    <div class="layui-row" style="padding-left:5px;">
                        <div class="layui-col-md8">
                            <div class="demoTable">
                                <div class="layui-inline">
                                    <input class="layui-input" name="keyword" id="keyword" placeholder="关键词" autocomplete="off">
                                </div>
                                <button class="layui-btn search" data-type="reload" data-isparent="true">搜索</button>
                            </div>
                        </div>
                        <div class="layui-btn-group parent-type layui-col-md4" style="text-align: right;padding-right: 5px;">
                            <button class="layui-btn" type="button" id="move">
                                <i class="layui-icon">&#xe602;</i>
                            </button>
                        </div>
                    </div>

                    <table class="layui-hide layui-table" id="layui-table1" lay-filter="Event"></table>
                </div>
                <div class="layui-card-body layui-col-md6">
                    <fieldset class="layui-elem-field">
                        <legend>给下列用户发送优惠券</legend>
                        <form id="form0" class="layui-form" action="@Url.Action("SaveShopUserCoupon")" method="post" novalidate="novalidate" data-ajax="true" data-ajax-success="ReloadAjaxCallbackgoback" data-ajax-failure="FailureAjaxCallback" data-ajax-method="Post" role="form" lay-filter="form1">
                            <div class="layui-field-box">
                                <input type="hidden" name="CouponId" value="@Model" />
                                <input id="Members" type="text" name="Members" class="layui-input" value="" />
                            </div>
                            <div class="layui-form-item">
                                <button class="layui-btn"  type="submit" style="margin-left:15px;" lay-filter="demo1">确认发放优惠券</button>
                            </div>
                        </form>
                    </fieldset>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="Layer_ajax"></div>


@section scripts{
    <script src="~/static/js/jquery.ztree.core.js" type="text/javascript"></script>
    <script src="~/static/js/jquery.ztree.excheck.js" type="text/javascript"></script>
    <script src="~/static/js/jquery.ztree.exedit.js" type="text/javascript"></script>

    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/bootstrap-tagsinput.js"></script>
    <script type="text/javascript">
        var tableH = $(".layui-table-container").height();
        layui.use(['form', 'layedit', 'laydate', 'tree', 'table', 'layer', 'element', 'upload'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate
                , table = layui.table
                , upload = layui.upload;

            table.render({
                elem: "#layui-table1",
                url: '@Url.Action("GetMemberData")',
                cellMinWidth: 26,
                cols: [[
                    { type: 'checkbox' },
                    { field: 'userName', title: '用户名', event: 'setSign' },
                    { field: 'name', title: '姓名', event: 'setSign' },
                    //{ title: '操作', width: 120, align: 'center', toolbar: '#barDemo' }
                ]],
                id: "table1",
                //limits: [1, 2, 3, 5, 6],
                page: true,
                done: function (res, curr, count) {

                }
            });

            table.on('tool(Event)', function (obj) {
                var data = obj.data;
                if (obj.event === 'setSign') {
                    $('#Members').tagsinput('add', { id: data.id, name: data.userName });
                }
            });

            $("#move").on("click", function () {
                var checkStatus = table.checkStatus('table1');
                if (checkStatus.data.length>0) {
                    for (var i = 0; i < checkStatus.data.length; i++) {
                        $('#Members').tagsinput('add', { id: checkStatus.data[i].id, name: checkStatus.data[i].userName });
                    }
                }
                else {
                    layer.msg("请至少选择一条信息")
                }


            })

            $(".search").on('click', function () {
                    table.reload('table1', {
                        where: { keyword: $('#keyword').val() }
                    })
            });

            function LayerOpen(title, url) {
                var open = layer.open({
                    type: 2,
                    title: title,
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['600px', '450px'],
                    content: url,
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index)//确定两个页面的父子关系
                    },
                    end: function () {
                        //销毁后重新加载
                        table.reload('table1', {
                        })
                    }
                });
            }
        });


          $(document).ready(function () {
              $('#Members').tagsinput({
                confirmKeys: [13, 44],
                trimValue: true,
                itemValue: function (item) {
                    return item.id;
                },
                itemText: function (item) {
                    return item.name;
                }
            });
        });

        function ReloadAjaxCallbackgoback(data, successInfo) {
            if (data.success) {
                layer.confirm('保存成功', {
                    btn: ['关闭'],
                }, function () {
                    top.CloseTab(212);
                })
            } else {
                layer.msg('保存失败：' + successInfo);
            }
        }

        $("#layui-Area").click(function () {
            $(".layui-Area .layui-Area-hide").toggleClass("layui-Area-show")
            $(this).parent(".layui-form-select").toggleClass("layui-form-selected");
        });

        $(".layui-Area").mouseleave(function () {
            $(".layui-Area .layui-Area-hide").removeClass("layui-Area-show")
        })

    </script>
}
